<template>
  <div class="h-[40px] flex justify-between relative items-center border-t-[2px] border-[#233D76]">
    <div class="bgL h-[28px] w-full absolute right-0 top-0 text-right z-0">
      <div class="absolute right-[4px] top-[3px] w-[2px] h-[2px] bg-[#289BFC]"></div>
      <div class="absolute right-[4px] top-[8px] w-[2px] h-[2px] bg-[#165698]"></div>
      <div class="absolute right-[4px] top-[13px] w-[2px] h-[2px] bg-[#0b2e62]"></div>
    </div>
    <img
      class="w-[194px] h-full absolute left-0 top-0 z-10"
      src="../assets/image/cardHeader.png"
      alt=""
    />
    <div class="title">
      {{ title }}
      <el-icon v-if="info?.isWarning != 0 && isShowStatus" style="color: red; margin-left: 10px"
        ><WarningFilled
      /></el-icon>
      <el-icon
        style="color: yellow; font-weight: bold; margin-left: 10px"
        v-if="
          dayjs().startOf('day').diff(dayjs(info?.serviceEndDate), 'day') >= -15 &&
          dayjs().startOf('day').diff(dayjs(info?.serviceEndDate), 'day') <= 7 &&
          isShowStatus
        "
        ><Timer
      /></el-icon>
    </div>
    <div
      v-if="isShowRight"
      class="relative mt-[-10px] mr-[15px] text-[#80FCFD] text-[18px] flex items-center"
    >
      {{ rightCtn }}
    </div>
  </div>
  <div
    class="border-[1px] relative border-[#13438D] p-[16px] mt-2 h-[calc(100%-48px)]"
    :id="contentId"
  >
    <div class="w-[1px] h-[32px] colBor absolute right-0 top-[-10px]"></div>
    <div class="w-[1px] h-[32px] colBor absolute left-0 bottom-0"></div>
    <div class="w-[32px] h-[1px] colBor absolute left-0 bottom-0"></div>
    <div class="w-[1px] h-[32px] colBor absolute right-0 bottom-0"></div>
    <div class="w-[32px] h-[1px] colBor absolute right-0 bottom-0"></div>
    <slot name="content"></slot>
  </div>
</template>

<script lang="ts" setup>
import { dayjs } from 'element-plus'

const { title, isShowRight, contentId, rightCtn } = defineProps<{
  title: string
  isShowRight?: boolean
  isShowStatus?: boolean
  contentId?: string
  rightCtn?: string
  info?: any
}>()
</script>

<style scoped lang="less">
.bgL {
  background: linear-gradient(180deg, rgba(0, 70, 187, 0.2) 0%, rgba(0, 70, 187, 0.4) 100%);
}
.title {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  font-family: YouSheBiaoTiHei;
  color: #5e68a2;
  line-height: 26px;
  background: linear-gradient(180deg, #ffffff 0%, #a9e2ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-left: 24px;
  position: relative;
  z-index: 99;
  &::before {
    position: absolute;
    content: '';
    left: 7px;
    top: 3px;
    width: 4px;
    height: 18px;
    background: #289bfc;
  }
}
.colBor {
  border: 2px solid;
  border-image: linear-gradient(180deg, rgba(247, 250, 254, 1), rgba(36, 121, 236, 1)) 2 2;
}
</style>
